文档流和文本流的区别

  • 文档流是相对于盒子模型来说的
    • 元素浮动后,会跳出文档流。当后面有元素时,其他元素会忽视它所占据的位置,覆盖它。但是文字却认同它所占据的位置,围绕它布局,也就是说没有脱离文本流。
    • 造成脱离文档流的方式:float
  • 文本流是相对于文字段落来说的
    • 绝对定位后,不仅元素盒子会脱离文档流,文字也会脱离文本流。即后面的元素的文本也不认同它所占据的位置,会直接在下面布局,不会围绕了。
    • 造成脱离文本流的方式:绝对定位

演示

  1. 正常情况下

浮动之前

  1. 浮动之后(脱离文档流)

    浮动之后

  2. 绝对定位之后(脱离文本流)

    绝对定位